<template>
  <el-card class="follow-card">
    <h4><svg-icon name="follow" width="20" height="20"></svg-icon>关注我</h4>
    <div class="follow-items">
        <FollowItem v-for="item in list" :key="item.name" :name="item.name" :color="item.color" :account="item.account" :text="item.text"/>
    </div>
  </el-card>
</template>
<script setup>
import {ref,onMounted,watchEffect} from "vue"
import FollowItem from '@/components/FollowItem.vue';
import {useStore} from "vuex"
const store = useStore();
let list = ref([]);
onMounted(()=>{
    list.value = [
        {
            name:"qq",
            account:"",
            text:"QQ号",
            color:"#409eff",
        },
        {
            name:"github",
            account:"",
            text:"gitee",
            color:"#606266"
        },
        {
            name:"gitee",
            text:"gitee",
            color:"red",
            account:""
        },
        {
            name:"email",
            text:"邮箱",
            color:"#f56c87",
            account:"",
        },
        {
            name:"wx",
            text:"微信",
            color:"#67c23a",
            account:"",
        }
    ]
})
watchEffect(()=>{
  list.value.forEach(item=>{
      console.log(item["name"]);
      item["account"] = store.state.webInfo[`${item["name"]}`];
  })
})

</script>
<style lang="scss" scoped>
:deep .el-card__body {
  padding: 0;
}
.follow-card {
  padding:10px;
  margin-top: 20px;
  &:hover {
    box-shadow: 1px 1px 10px 5px $shadowcolor;
    h4 {
      background-size: 30% 4px;
    }
  }
  h4 {
    display: flex;
    :deep svg {
      vertical-align: -4px;
      margin-right:5px;
    }
    padding-bottom: 10px;
    background-image:linear-gradient(0deg, #000,#000);
    background-repeat: no-repeat;
    background-size:10% 4px;
    background-position: left bottom;
    transition:background .5s ease-out;
  }
  .follow-items {
    margin-top:20px;
    padding:0 10px;
  }
}
</style>
